<template>
  <page-form-item class="stage-fee-item" :label="feeOption.itemName" size="1/2">
    <template #label>
      <div class="stage-fee-item-label">
        {{ feeOption.itemName }}
        <div class="reduction-btn" v-if="!feeOption.showCostTypeSwitch && feeOption.costType == 20">减免金额</div>
      </div>
    </template>
    <i-input-number :precision="2" v-model="feeOption.amount" />
    <template v-if="feeOption.showCostTypeSwitch">
      <a-radio v-model="feeOption.costType" :list="feeCostTypeOptionList" />
    </template>
  </page-form-item>
</template>
<script setup>
  import { computed } from 'vue'
  const props = defineProps({
    feeIndex: Number,
    feeList: Array,
  })
  const feeOption = computed(() => {
    return props.feeList[props.feeIndex]
  })
  const feeCostTypeOptionList = [
    {
      label: '收款',
      value: 10,
    },
    {
      label: '付款',
      value: 20,
    },
  ]
</script>
<style lang="less" scoped>
  .stage-fee-item-label {
    display: flex;
    align-items: center;
    .stage-fee-item-required {
      color: #f53f3f;
      line-height: 1;
      vertical-align: middle;
      font-size: 20px;
      position: relative;
      top: 4px;
    }
  }
  .reduction-btn {
    width: 64px;
    height: 20px;
    background: #e8f7ff;
    border-radius: 2px 2px 2px 2px;
    opacity: 1;
    border: 1px solid #3491fa;
    color: #3491fa;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 12px;
  }
</style>
